<link rel="import" href="../bower_components/app-layout/app-drawer-layout/app-drawer-layout.html">
<link rel="import" href="../bower_components/app-layout/app-drawer/app-drawer.html">
<link rel="import" href="../bower_components/app-layout/app-header-layout/app-header-layout.html">
<link rel="import" href="../bower_components/app-layout/app-header/app-header.html">
<link rel="import" href="../bower_components/app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="../bower_components/app-route/app-location.html">
<link rel="import" href="../bower_components/app-route/app-route.html">
<link rel="import" href="../bower_components/iron-icon/iron-icon.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="../bower_components/iron-selector/iron-selector.html">
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="tr-home.html">

<dom-module id="test-results">
  <template>
    <style>
      app-toolbar {
        background-color: var(--app-primary-color);
        overflow: hidden;
      }
      :host {
        display: block;
        --app-primary-color: #93bbfd;
        --app-secondary-color: black;
        font-size: 13px;
        font-family: 'Roboto', 'Noto', sans-serif;
        font-weight: 300;
        line-height: 1.5;
        min-height: 100vh;
        background-color: #eee;
      }
      app-drawer {
        --app-drawer-width: 160px;
      }
      app-header {
        background-color: var(--app-primary-color);
        color: #000;
      }
      app-header iron-icon {
        --paper-icon-button-ink-color: white;
        margin-right: 20px;
      }
      div[title] {
        @apply(--layout-flex);
        font-weight: 400;
      }
      iron-pages {
        margin: 20px;
      }
      #logo {
        width: 112px;
        margin: 0 auto;
      }
      .drawer-layout {
        @apply(--layout-vertical);
        height: 100%;
        overflow: auto;
      }
      .drawer-layout iron-selector {
        padding-top: 10px;
      }
      .drawer-list {
        margin: 0;
      }
      .drawer-list a {
        display: block;
        padding: 0 16px;
        line-height: 30px;
        text-decoration: none;
        color: var(--app-secondary-color);
        font-weight: 300;
        font-size: 1.05em;
        outline: none;
        border-bottom: none;
      }
      .drawer-list a.iron-selected {
        color: black;
        font-weight: bold;
      }
      .drawer-list a.subroute {
        padding-left: 32px;
      }
      .drawer-toolbar {
        flex-grow: 0;
        flex-shrink: 0;
      }
      .drawer-splitter {
        border-top: 1px solid #eee;
        font-size: 0.8em;
        font-weight: 400;
        color: #888;
        margin: 0 16px;
        margin-top: 8px;
        padding-top: 8px;
        margin-bottom: -4px;
        line-height: 30px;
      }
      .header-toolbar {
        @apply(--layout-horizontal);
        font-size: 1.8em;
      }
    </style>
    <app-location
        route="{{route}}"
        url-space-regex="^/(home)?$">
    </app-location>
    <app-route
        route="{{route}}"
        pattern="/:page"
        data="{{routeData}}"
        tail="{{subroute}}">
    </app-route>
    <app-drawer-layout id="layout" fullbleed>
      <!-- Drawer content -->
      <app-drawer id="drawer" opened>
        <div class="drawer-layout">
          <app-toolbar class="drawer-toolbar">
            <img id="logo" src="/images/chromium-logo-256.png">
          </app-toolbar>
          <iron-selector
              selected="[[page]]"
              attr-for-selected="name"
              class="drawer-list"
              role="navigation">
            <a name="home" href="/home">Home</a>
          </iron-selector>
        </div>
      </app-drawer>
      <!-- Main content -->
      <app-header-layout>
        <app-header condenses reveals>
          <app-toolbar class="header-toolbar">
            <iron-icon icon="menu" drawer-toggle></iron-icon>
            <div title>[[displayName]]</div>
          </app-toolbar>
        </app-header>
      </app-header-layout>
      <iron-pages role="main" selected="[[page]]" attr-for-selected="name">
        <tr-home name="home"></tr-home>
      </iron-pages>
    </app-drawer-layout>
  </template>
  <script>
    (function() {
      'use strict';
      Polymer({
        is: 'test-results',
        properties: {
          page: {
            type: String,
            reflectToAttribute: true,
            observer: '_pageChanged'
          },
          route: {
            type: String,
            observer: '_routeChanged',
          },
        },
        _pageChanged: function(page) {
          if (this.$.drawer.opened && this.$.layout.narrow) {
            this.$.drawer.toggle();
          }
        },
        _routeChanged: function(route) {
          this.page = this.routeData.page || 'home';
          this.displayName = 'Test Results Server';
        },
      });
    })();
  </script>
</dom-module>
